#{extends 'main.html' /}
<h2>${name}<br/><a class = "link" href = ${link} target="_blank"><font size="1px">*click to open the document</font></a>
</h2>
<ul id ="columns">
	<li>
		<div class = "inputField">
			Please Choose a worksheet 
			<br/>
			<select class = "sheets" id = "sheets" onChange="getReasonings()">
				<option>(None)</option>
				#{list items:worksheets ,as:'worksheet'}
				<option>${worksheet.getTitle().getPlainText()}</option>
				#{/list}
			</select>
		</div>
	</li>
</ul>
<div id = "button">
</div>
<div id ="message">
</div>
<script type="text/javascript">
function getFields(){
	var sheets = document.getElementById('sheets');
	var selectedIndex = sheets.selectedIndex;
	var columns = document.getElementById('columns');
	var reasonings = document.getElementById('reasonings');
	var selectedReason = reasonings.selectedIndex;
	var str='';
	var columnsItem = document.getElementById("columnsList1");
	if(columnsItem !=null)
		columns.removeChild(columnsItem);
	var columnsItem2 = document.getElementById("columnsList2");
	if(columnsItem2 != null)
		columns.removeChild(columnsItem2);
	var columnsItem3 = document.getElementById("columnsList3");
	if(columnsItem2 != null)
		columns.removeChild(columnsItem3);
	var button = document.getElementById("button");
	button.innerHTML='';
	if(selectedReason>0){
	$.post('@{getSheetColumns}', {sheet:selectedIndex}, function(data){
		var li = document.createElement('li');
		li.id = "columnsList1";
		if(selectedReason ==3 || selectedReason==4){
				str = '<div class = "inputField">Please Choose The Task Name/Description Column<br/><select id = "Columns1" class = "sheets" onChange="getFields2()"><option  value="">(None)</option>';
		}else{
		str = '<div class = "inputField">Please Choose a Column<br/><select id = "Columns1" class = "sheets" onChange="getFields2()"><option  value="">(None)</option>';
	}
		$.each(data, function(id, item){
			str += '<option value ="'+item+'">'+item+'</option>';
		});
		str+='</select></div>'
		li.innerHTML= str;
		columns.appendChild(li);
		
	});
	}
}
function getFields2(){
	var sheets = document.getElementById('sheets');
	var selectedIndex = sheets.selectedIndex;
	var reasonings = document.getElementById("reasonings");
	var chosenReasoning = reasonings.selectedIndex;
	var columns1 = document.getElementById("Columns1");
	var chosenColumn = columns1.selectedIndex;
	var columns = document.getElementById('columns');
	var str='';
	var columnsItem = document.getElementById("columnsList2");
	if(columnsItem !=null){
		columns.removeChild(columnsItem);
		var columnsItem3 = document.getElementById("columnsList3");
		if(columnsItem3!=null)
			columns.removeChild(columnsItem3);
		var button = document.getElementById("button");
		button.innerHTML = '';
	}
	if((chosenReasoning == 3 || chosenReasoning ==4) && chosenColumn!=0){
		$.post('@{getSheetColumns}', {sheet:selectedIndex, column:chosenColumn}, function(data){
			var li = document.createElement('li');
			li.id="columnsList2";
			if(chosenReasoning == 3){
			str = '<div class = "inputField">Please Choose the StartDate Column<br/><select id = "Columns2" class = "sheets" onChange="getFields3()"><option  value="">(None)</option>';
		}else{
				str = '<div class = "inputField">Please Choose the Deadline Column<br/><select id = "Columns2" class = "sheets" onChange="getFields3()"><option  value="">(None)</option>';
		}
			$.each(data, function(id, item){
				str += '<option value ="'+item+'">'+item+'</option>';
			});
			str+='</select></div>'
			li.innerHTML= str;
			columns.appendChild(li);

		});
		
	}else{
			if(chosenColumn !=0)
				addbutton();
			else{
				var button = document.getElementById("button");
				button.innerHTML = '';
			}
		}
}
function getFields3(){
	var sheets = document.getElementById('sheets');
	var selectedIndex = sheets.selectedIndex;
	var reasonings = document.getElementById("reasonings");
	var chosenReasoning = reasonings.selectedIndex;
	var columns1 = document.getElementById("Columns1");
	var chosenColumn = columns1.selectedIndex;
	var columns2 = document.getElementById("Columns2");
	var chosenColumn2 = columns2.selectedIndex;
	var columns = document.getElementById('columns');
	var str='';
	var columnsItem = document.getElementById("columnsList3");
	if(columnsItem !=null){
		columns.removeChild(columnsItem);
		var button = document.getElementById("button");
		button.innerHTML = '';
	}
	if(chosenColumn2!=0){
		$.post('@{getSheetColumns}', {sheet:selectedIndex, column:chosenColumn, column2:chosenColumn2}, function(data){
			var li = document.createElement('li');
			li.id="columnsList3";
			if(chosenReasoning ==3){
				str = '<div class = "inputField">Please Choose the endDate Column<br/><select id = "Columns3" class = "sheets" onChange="checkButton()"><option  value="">(None)</option>';
			}else{
				str = '<div class = "inputField">Please Choose the Working Hours of the task Column<br/><select id = "Columns3" class = "sheets" onChange="checkButton()"><option  value="">(None)</option>';
			}
			
			$.each(data, function(id, item){
				str += '<option value ="'+item+'">'+item+'</option>';
			});
			str+='</select></div>'
			li.innerHTML= str;
			columns.appendChild(li);

		});
		
	}
}

function checkButton(){
	var columnsItem2 = document.getElementById("Columns2");
	var selectedIndex = columnsItem2.selectedIndex;
	if(selectedIndex==0){
		var button = document.getElementById("button");
		button.innerHTML='';
	}else{
		var myButton = document.getElementById("myButton");
		if(myButton ==null){
			addbutton();
		}
	}
}
function addbutton(){
		var myDiv = document.getElementById("button");
		var str = '<input type ="button" id="myButton" value="Perform Reasoning"onclick = "performReasoning()"></input>';
		myDiv.innerHTML=str;
}
function getReasonings(){
	var sheets = document.getElementById('sheets');
	var selectedIndex = sheets.selectedIndex;
	var columns = document.getElementById('columns');
	var reasoningsItem = document.getElementById("reasoningsList");
	var str='';
	if(selectedIndex>0 && reasoningsItem == null){
	$.post('@{getReasonings}', function(data){
		var li = document.createElement('li');
		li.id = "reasoningsList";
		str = '<div class = "inputField">Please Choose a Reasoning<br/><select id ="reasonings" class = "sheets" onChange="getFields()"><option  value="">(None)</option>';
		$.each(data, function(id, item){
			str += '<option value ="'+item+'">'+item+'</option>';
		});
		str+='</select></div>'
		li.innerHTML= str;
		columns.appendChild(li);
		
	});
	}else{
		if(selectedIndex==0){
			columns.removeChild(reasoningsItem);
			var columnsItem = document.getElementById("columnsList1");
			if(columnsItem !=null)
				columns.removeChild(columnsItem);
			var columnsItem2 = document.getElementById("columnsList2");
			if(columnsItem2 != null)
				columns.removeChild(columnsItem2);
			var button = document.getElementById("button");
			button.innerHTML='';
			var message = document.getElementById("message");
			message.innerHTML='';
	}
	}
}
function performReasoning(){
	var sheet = document.getElementById("sheets")
	var selectedSheet = sheet.selectedIndex;
	var columns1 = document.getElementById("Columns1");
	var selectedColumn1 = columns1.value;
	var columns2 = document.getElementById("Columns2");
	if(columns2 !=null)
		var selectedColumn2 = columns2.value;
	else
		var selectedColumn2 = null;
	var columns3 = document.getElementById("Columns3");
	if(columns3 !=null)
		var selectedColumn3 = columns3.value;
	else
		var selectedColumn3 = null;
	var reasonings = document.getElementById("reasonings");
	var selectedReason = reasonings.selectedIndex;
	$.post('@{performReasoning}', {sheet:selectedSheet, column1:selectedColumn1, column2:selectedColumn2, column3:selectedColumn3, reasoning:selectedReason}, function(data){
		var div = document.getElementById("button");
		div.innerHTML='<input type ="button" id="myButton" value="Perform Reasoning" onclick = "performReasoning()"></input><br/>';
		$.each(data, function(id, item){	
			if(id == 0){
				$.each(item, function(id2, item2){
				div.innerHTML += '<br/><font id="Failure" color="red">-'+item2+'</font>';
				});
			}else{
				$.each(item, function(id2, item2){
				div.innerHTML += '<br/><font id="Success" color="green">-'+item2 +'</font>';
				});
			}
		});
	});
}
</script>